<template>
    <view class="container">
        <tui-tab :tabs="tabs" isSticky :current="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19" @change="change"></tui-tab>
        <view class="tui-records__list">
            <tui-list-cell :hover="false" v-for="(item,index) in datalist" :key="index">
                <view class="tui-records__item">
                    <image v-if="item.ptype==2" class="tui-icon" src="/static/images/mall/wallet/icon_expend_3x.png"></image>
                    <image v-if="item.ptype==1" class="tui-icon" src="/static/images/mall/wallet/icon_income_3x.png"></image>
                    <view>
                        <view class="tui-title">{{ item.description }}</view>
                        <view class="tui-desc">{{ item.create_time }}</view>
                    </view>
                    <view class="tui-right__box">
                        <view :class="item.ptype==2 ?'tui-expend':'tui-amount'">
                            {{item.ptype==2?'-':'+'}}{{ item.income }}
                        </view>
                        <view class="tui-desc">订单号: {{item.order_num_alias}}</view>
                    </view>
                </view>
            </tui-list-cell>
        </view>
        <!--加载loadding-->
        <tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
        <tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
        <!--加载loadding-->
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabs: ["全部", "收入", "支出"],
            currentTab: 0,
            loadding: false,
            pullUpOn: true,
            limit: 15,
            page: 1,
            loadend: false,
            datalist: []
        }
    },
    onLoad() {
        this.getRecordsList(true)
    },
    methods: {
        change(e) {
            this.currentTab = e.index;
            this.page = 1;
            this.loadend = false;
            this.datalist = [];
            this.getRecordsList();
        },
        getRecordsList(isPage) {
            const _this = this
            if (_this.loading) return;
            if (isPage === true) {
                _this.page = 1;
                _this.datalist = [];
            } else {
                if (_this.loadend) return;
            }
            _this.$request.post('adminstore.incomelog', {
                ptype: this.currentTab,
                page: _this.page,
                limit: _this.limit
            }).then(res => {
                if (res.errno == 0) {
                    _this.datalist = _this.datalist.concat(res.data.data);
                    _this.page = _this.page + 1
                    _this.loadend = _this.datalist.length < _this.limit;
                    if (_this.datalist.length == 0) {
                        _this.pullUpOn = false;
                    }
                }
            })
        }
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.page = 1;
        this.loadend = false;
        this.datalist = [];
        this.getRecordsList();
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 200);
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        //只是测试效果，逻辑以实际数据为准
        this.loadding = true
        this.pullUpOn = true
        this.getRecordsList();
        setTimeout(() => {
            this.loadding = false
            this.pullUpOn = false
        }, 1000)
    },
}
</script>

<style>
.container {
    padding-bottom: env(safe-area-inset-bottom);
}

.tui-records__list {
    margin-top: 20rpx;
}

.tui-records__item {
    width: 100%;
    display: flex;
    align-items: center;
}

.tui-icon {
    width: 72rpx;
    height: 72rpx;
    margin-right: 20rpx;
}

.tui-title {
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
}

.tui-desc {
    font-size: 24rpx;
    font-weight: 400;
    color: #888888;
    padding-top: 12rpx;
}

.tui-right__box {
    margin-left: auto;
    text-align: right;
}

.tui-amount {
    font-size: 30rpx;
    font-weight: 400;
    color: #eb0909;
}

.tui-expend {
    color: #19be6b !important;
}
</style>
